import React from "react";
import PropTypes from "prop-types";
import StyledProfile, {
  Album,
  AlbumSection,
  AlbumTitle,
  CloseIcon,
  ContactSection,
  Photo,
  SocialLinks,
} from "./style";
import Avatar from "components/Avatar";
import Face from "assets/images/face-male-3.jpg";
import "styled-components/macro";
import Paragraph from "components/Paragraph";
import Text from "components/Text";
import Icon from "components/Icon";
import {
  faGithub,
  faLinkedin,
  faWeibo,
} from "@fortawesome/free-brands-svg-icons";
import Separator from "components/Separator";
import photo1 from "assets/images/face-male-1.jpg";
import photo2 from "assets/images/face-male-2.jpg";
import photo3 from "assets/images/face-male-3.jpg";
import { ReactComponent as Cross } from "assets/icons/cross.svg";

function Profile({ children, ...rest }) {
  return (
    <StyledProfile {...rest}>
      <CloseIcon icon={Cross} />
      <Avatar
        css={`
          margin: 26px 0;
        `}
        src={Face}
        size="160px"
        status="online"
        statusIconSize="25px"
      />
      <Paragraph
        size="xlarge"
        css={`
          margin-bottom: 12px;
        `}
      >
        我的名字
      </Paragraph>
      <Paragraph
        size="medium"
        type="secondary"
        css={`
          margin-bottom: 18px;
        `}
      >
        上海市 杨浦区
      </Paragraph>
      <Paragraph
        css={`
          margin-bottom: 26px;
        `}
      >
        这是我的简介，快来看看吧，说不定会对我有兴趣哦
      </Paragraph>
      <SocialLinks>
        <Icon.Social
          icon={faWeibo}
          bgColor="#F06767"
          href="http://www.weibo.com"
        />
        <Icon.Social
          icon={faGithub}
          bgColor="black"
          href="http://www.github.com"
        />
        <Icon.Social
          icon={faLinkedin}
          bgColor="#2483C0"
          href="http://www.linkedin.com"
        />
      </SocialLinks>
      <Separator
        css={`
          margin: 30px 0;
        `}
      />
      <ContactSection>
        <Description label="联系电话">13122503052</Description>
        <Description label="电子邮件">13122503052@163.com</Description>
        <Description label="个人网站">http://www.wise.com</Description>
      </ContactSection>
      <Separator
        css={`
          margin: 30px 0;
        `}
      />
      <AlbumSection>
        <AlbumTitle>
          <Text type="secondary">相册(22)</Text>
          <a>查看全部</a>
        </AlbumTitle>
        <Album>
          <Photo src={photo1} />
          <Photo src={photo2} />
          <Photo src={photo3} />
        </Album>
      </AlbumSection>
    </StyledProfile>
  );
}

const Description = ({ label, children }) => {
  return (
    <Paragraph>
      <Text type="secondary">{label}: </Text>
      <Text>{children}</Text>
    </Paragraph>
  );
};

Profile.propTypes = {
  children: PropTypes.any,
};

export default Profile;
